<template>
  <div class="home-page">
    <!-- 轮播图横幅 -->
    <section class="hero-section">
      <el-carousel
        :interval="5000"
        :arrow="'hover'"
        indicator-position="outside"
        class="hero-carousel"
        height="400px"
      >
        <el-carousel-item
          v-for="(banner, index) in banners"
          :key="index"
          class="hero-item"
        >
          <div
            class="hero-content"
            :style="{ backgroundImage: `url(${banner.image})` }"
          >
            <div class="hero-overlay">
              <div class="hero-text">
                <h1 class="hero-title">{{ banner.title }}</h1>
                <p class="hero-subtitle">{{ banner.subtitle }}</p>
                <div class="hero-actions">
                  <el-button
                    type="primary"
                    size="large"
                    @click="handleBannerAction(banner)"
                  >
                    {{ banner.buttonText }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 快速导航 -->
    <section class="quick-nav-section">
      <div class="container">
        <div class="quick-nav-grid">
          <div
            v-for="nav in quickNavs"
            :key="nav.id"
            class="quick-nav-item"
            @click="handleQuickNav(nav)"
          >
            <div class="nav-icon" :class="nav.color">
              <el-icon :size="32">
                <component :is="nav.icon" />
              </el-icon>
            </div>
            <div class="nav-content">
              <h3 class="nav-title">{{ nav.title }}</h3>
              <p class="nav-desc">{{ nav.description }}</p>
            </div>
            <div class="nav-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 推荐课程 -->
    <section class="featured-courses-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">推荐课程</h2>
          <p class="section-subtitle">精选优质课程，助力学习成长</p>
          <el-button text type="primary" @click="viewAllCourses">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
        
        <div class="courses-grid">
          <CourseCard
            v-for="course in featuredCourses"
            :key="course.id"
            :course="course"
            @click="viewCourse(course.id)"
            @favorite="handleFavorite"
            @enroll="handleEnroll"
          />
        </div>
        
        <!-- 加载状态 -->
        <div v-if="coursesLoading" class="loading-container">
          <el-skeleton :rows="3" animated />
        </div>
      </div>
    </section>

    <!-- 热门考试 -->
    <section class="popular-exams-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">热门考试</h2>
          <p class="section-subtitle">检验学习成果，提升专业技能</p>
          <el-button text type="primary" @click="viewAllExams">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
        
        <div class="exams-grid">
          <div
            v-for="exam in popularExams"
            :key="exam.id"
            class="exam-card"
            @click="viewExam(exam.id)"
          >
            <div class="exam-header">
              <div class="exam-type" :class="exam.type">
                {{ getExamTypeText(exam.type) }}
              </div>
              <div class="exam-difficulty" :class="exam.difficulty">
                {{ getDifficultyText(exam.difficulty) }}
              </div>
            </div>
            
            <div class="exam-content">
              <h3 class="exam-title">{{ exam.title }}</h3>
              <p class="exam-desc">{{ exam.description }}</p>
              
              <div class="exam-meta">
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ exam.duration }}分钟</span>
                </div>
                <div class="meta-item">
                  <el-icon><Document /></el-icon>
                  <span>{{ exam.questionCount }}题</span>
                </div>
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>{{ exam.participantCount }}人参与</span>
                </div>
              </div>
            </div>
            
            <div class="exam-footer">
              <div class="exam-score">
                <span class="score-label">平均分:</span>
                <span class="score-value">{{ exam.averageScore }}分</span>
              </div>
              <el-button type="primary" size="small">
                开始考试
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 学习统计 -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon primary">
              <el-icon><Reading /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ userStats.coursesCompleted }}</div>
              <div class="stat-label">已完成课程</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon success">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ userStats.examsCompleted }}</div>
              <div class="stat-label">已完成考试</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon warning">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ userStats.certificates }}</div>
              <div class="stat-label">获得证书</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon info">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ userStats.studyHours }}</div>
              <div class="stat-label">学习时长(小时)</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新动态 -->
    <section class="news-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">最新动态</h2>
          <p class="section-subtitle">了解平台最新资讯和公告</p>
          <el-button text type="primary" @click="viewAllNews">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
        
        <div class="news-grid">
          <div
            v-for="news in latestNews"
            :key="news.id"
            class="news-card"
            @click="viewNews(news.id)"
          >
            <div class="news-image">
              <img :src="news.image" :alt="news.title" />
              <div class="news-category">{{ news.category }}</div>
            </div>
            
            <div class="news-content">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              
              <div class="news-meta">
                <span class="news-date">{{ formatDate(news.publishDate) }}</span>
                <span class="news-views">
                  <el-icon><View /></el-icon>
                  {{ news.views }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="partners-section">
      <div class="container">
        <h2 class="section-title">合作伙伴</h2>
        <div class="partners-grid">
          <div
            v-for="partner in partners"
            :key="partner.id"
            class="partner-item"
          >
            <img :src="partner.logo" :alt="partner.name" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowRight,
  Reading,
  Document,
  Trophy,
  Clock,
  User,
  View
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import CourseCard from '@/components/course/CourseCard.vue'
import { useUserStore } from '@/stores/user'
import {
  getBanners,
  getFeaturedCourses,
  getPopularExams,
  getUserStats,
  getLatestNews,
  getPartners
} from '@/api/home'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const banners = ref([])
const featuredCourses = ref([])
const popularExams = ref([])
const userStats = ref({
  coursesCompleted: 0,
  examsCompleted: 0,
  certificates: 0,
  studyHours: 0
})
const latestNews = ref([])
const partners = ref([])
const coursesLoading = ref(false)

// 快速导航配置
const quickNavs = ref([
  {
    id: 1,
    title: '课程学习',
    description: '丰富的在线课程资源',
    icon: 'Reading',
    color: 'primary',
    path: '/courses'
  },
  {
    id: 2,
    title: '在线考试',
    description: '专业的考试测评系统',
    icon: 'Document',
    color: 'success',
    path: '/exams'
  },
  {
    id: 3,
    title: '学习社区',
    description: '与同学交流学习心得',
    icon: 'ChatDotRound',
    color: 'warning',
    path: '/community'
  },
  {
    id: 4,
    title: '个人中心',
    description: '管理学习进度和成果',
    icon: 'User',
    color: 'info',
    path: '/profile'
  }
])

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn)

// 方法
const handleBannerAction = (banner) => {
  if (banner.link) {
    router.push(banner.link)
  }
}

const handleQuickNav = (nav) => {
  router.push(nav.path)
}

const viewAllCourses = () => {
  router.push('/courses')
}

const viewCourse = (courseId) => {
  router.push(`/courses/${courseId}`)
}

const handleFavorite = async (courseId) => {
  try {
    // 处理收藏逻辑
    ElMessage.success('收藏成功')
  } catch (error) {
    ElMessage.error('收藏失败')
  }
}

const handleEnroll = async (courseId) => {
  try {
    // 处理报名逻辑
    ElMessage.success('报名成功')
  } catch (error) {
    ElMessage.error('报名失败')
  }
}

const viewAllExams = () => {
  router.push('/exams')
}

const viewExam = (examId) => {
  router.push(`/exams/${examId}`)
}

const viewAllNews = () => {
  router.push('/news')
}

const viewNews = (newsId) => {
  router.push(`/news/${newsId}`)
}

const getExamTypeText = (type) => {
  const typeMap = {
    practice: '练习',
    formal: '正式',
    mock: '模拟'
  }
  return typeMap[type] || type
}

const getDifficultyText = (difficulty) => {
  const difficultyMap = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return difficultyMap[difficulty] || difficulty
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 加载数据
const loadBanners = async () => {
  try {
    const response = await getBanners()
    banners.value = response.data
  } catch (error) {
    console.error('加载轮播图失败:', error)
  }
}

const loadFeaturedCourses = async () => {
  try {
    coursesLoading.value = true
    const response = await getFeaturedCourses({ limit: 8 })
    featuredCourses.value = response.data
  } catch (error) {
    console.error('加载推荐课程失败:', error)
  } finally {
    coursesLoading.value = false
  }
}

const loadPopularExams = async () => {
  try {
    const response = await getPopularExams({ limit: 6 })
    popularExams.value = response.data
  } catch (error) {
    console.error('加载热门考试失败:', error)
  }
}

const loadUserStats = async () => {
  if (!isLoggedIn.value) return
  
  try {
    const response = await getUserStats()
    userStats.value = response.data
  } catch (error) {
    console.error('加载用户统计失败:', error)
  }
}

const loadLatestNews = async () => {
  try {
    const response = await getLatestNews({ limit: 6 })
    latestNews.value = response.data
  } catch (error) {
    console.error('加载最新动态失败:', error)
  }
}

const loadPartners = async () => {
  try {
    const response = await getPartners()
    partners.value = response.data
  } catch (error) {
    console.error('加载合作伙伴失败:', error)
  }
}

// 生命周期
onMounted(() => {
  loadBanners()
  loadFeaturedCourses()
  loadPopularExams()
  loadUserStats()
  loadLatestNews()
  loadPartners()
})
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

// 轮播图横幅
.hero-section {
  .hero-carousel {
    :deep(.el-carousel__container) {
      border-radius: 0;
    }
    
    :deep(.el-carousel__indicators) {
      .el-carousel__indicator {
        .el-carousel__button {
          background: rgba(255, 255, 255, 0.5);
          
          &.is-active {
            background: white;
          }
        }
      }
    }
  }
  
  .hero-item {
    .hero-content {
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
    }
    
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 100%
      );
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .hero-text {
      text-align: center;
      color: white;
      max-width: 600px;
      padding: 0 var(--spacing-lg);
    }
    
    .hero-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: var(--spacing-md);
      line-height: 1.2;
    }
    
    .hero-subtitle {
      font-size: var(--font-size-large);
      margin-bottom: var(--spacing-xl);
      opacity: 0.9;
      line-height: 1.6;
    }
    
    .hero-actions {
      .el-button {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--font-size-medium);
        border-radius: var(--border-radius-large);
      }
    }
  }
}

// 快速导航
.quick-nav-section {
  padding: var(--spacing-xl) 0;
  background: white;
  
  .quick-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .quick-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--primary-color);
      box-shadow: var(--box-shadow-base);
      transform: translateY(-2px);
    }
    
    .nav-icon {
      width: 64px;
      height: 64px;
      border-radius: var(--border-radius-base);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      
      &.primary {
        background: var(--primary-color-light-9);
        color: var(--primary-color);
      }
      
      &.success {
        background: var(--success-color-light-9);
        color: var(--success-color);
      }
      
      &.warning {
        background: var(--warning-color-light-9);
        color: var(--warning-color);
      }
      
      &.info {
        background: var(--info-color-light-9);
        color: var(--info-color);
      }
    }
    
    .nav-content {
      flex: 1;
      
      .nav-title {
        font-size: var(--font-size-large);
        font-weight: 600;
        color: var(--text-color-primary);
        margin-bottom: var(--spacing-xs);
      }
      
      .nav-desc {
        font-size: var(--font-size-medium);
        color: var(--text-color-secondary);
        margin: 0;
      }
    }
    
    .nav-arrow {
      color: var(--text-color-placeholder);
      transition: color 0.3s ease;
    }
    
    &:hover .nav-arrow {
      color: var(--primary-color);
    }
  }
}

// 通用区块样式
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
  
  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-sm);
  }
  
  .section-subtitle {
    font-size: var(--font-size-large);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-lg);
  }
  
  .el-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

// 推荐课程
.featured-courses-section {
  padding: var(--spacing-xl) 0;
  background: var(--fill-color-extra-light);
  
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .loading-container {
    margin-top: var(--spacing-xl);
  }
}

// 热门考试
.popular-exams-section {
  padding: var(--spacing-xl) 0;
  background: white;
  
  .exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .exam-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--primary-color);
      box-shadow: var(--box-shadow-base);
      transform: translateY(-2px);
    }
    
    .exam-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);
      
      .exam-type {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-small);
        font-size: var(--font-size-small);
        font-weight: 500;
        
        &.practice {
          background: var(--info-color-light-9);
          color: var(--info-color);
        }
        
        &.formal {
          background: var(--primary-color-light-9);
          color: var(--primary-color);
        }
        
        &.mock {
          background: var(--warning-color-light-9);
          color: var(--warning-color);
        }
      }
      
      .exam-difficulty {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-small);
        font-size: var(--font-size-small);
        font-weight: 500;
        
        &.easy {
          background: var(--success-color-light-9);
          color: var(--success-color);
        }
        
        &.medium {
          background: var(--warning-color-light-9);
          color: var(--warning-color);
        }
        
        &.hard {
          background: var(--danger-color-light-9);
          color: var(--danger-color);
        }
      }
    }
    
    .exam-content {
      margin-bottom: var(--spacing-lg);
      
      .exam-title {
        font-size: var(--font-size-large);
        font-weight: 600;
        color: var(--text-color-primary);
        margin-bottom: var(--spacing-sm);
        @include text-ellipsis;
      }
      
      .exam-desc {
        color: var(--text-color-secondary);
        line-height: 1.6;
        margin-bottom: var(--spacing-md);
        @include text-ellipsis(2);
      }
      
      .exam-meta {
        display: flex;
        gap: var(--spacing-md);
        
        .meta-item {
          display: flex;
          align-items: center;
          gap: var(--spacing-xs);
          font-size: var(--font-size-small);
          color: var(--text-color-secondary);
          
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
    
    .exam-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .exam-score {
        .score-label {
          font-size: var(--font-size-small);
          color: var(--text-color-secondary);
        }
        
        .score-value {
          font-weight: 600;
          color: var(--primary-color);
          margin-left: var(--spacing-xs);
        }
      }
    }
  }
}

// 学习统计
.stats-section {
  padding: var(--spacing-xl) 0;
  background: var(--primary-color);
  color: white;
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-large);
    backdrop-filter: blur(10px);
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      
      &.primary {
        background: rgba(255, 255, 255, 0.2);
      }
      
      &.success {
        background: var(--success-color);
      }
      
      &.warning {
        background: var(--warning-color);
      }
      
      &.info {
        background: var(--info-color);
      }
      
      .el-icon {
        font-size: 24px;
        color: white;
      }
    }
    
    .stat-content {
      .stat-number {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: var(--spacing-xs);
      }
      
      .stat-label {
        font-size: var(--font-size-medium);
        opacity: 0.9;
      }
    }
  }
}

// 最新动态
.news-section {
  padding: var(--spacing-xl) 0;
  background: var(--fill-color-extra-light);
  
  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .news-card {
    background: white;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: var(--box-shadow-base);
      transform: translateY(-2px);
    }
    
    .news-image {
      position: relative;
      height: 200px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
      
      .news-category {
        position: absolute;
        top: var(--spacing-md);
        left: var(--spacing-md);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--primary-color);
        color: white;
        border-radius: var(--border-radius-small);
        font-size: var(--font-size-small);
        font-weight: 500;
      }
    }
    
    &:hover .news-image img {
      transform: scale(1.05);
    }
    
    .news-content {
      padding: var(--spacing-lg);
      
      .news-title {
        font-size: var(--font-size-large);
        font-weight: 600;
        color: var(--text-color-primary);
        margin-bottom: var(--spacing-sm);
        @include text-ellipsis;
      }
      
      .news-summary {
        color: var(--text-color-secondary);
        line-height: 1.6;
        margin-bottom: var(--spacing-md);
        @include text-ellipsis(2);
      }
      
      .news-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .news-date {
          font-size: var(--font-size-small);
          color: var(--text-color-placeholder);
        }
        
        .news-views {
          display: flex;
          align-items: center;
          gap: var(--spacing-xs);
          font-size: var(--font-size-small);
          color: var(--text-color-placeholder);
          
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
}

// 合作伙伴
.partners-section {
  padding: var(--spacing-xl) 0;
  background: white;
  
  .section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-xl);
  }
  
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
  }
  
  .partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--primary-color);
      box-shadow: var(--box-shadow-light);
    }
    
    img {
      max-width: 100%;
      max-height: 60px;
      object-fit: contain;
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }
    
    &:hover img {
      filter: grayscale(0%);
    }
  }
}

// 响应式设计
@include respond-below(lg) {
  .hero-item {
    .hero-title {
      font-size: 2.5rem;
    }
  }
  
  .section-header {
    .section-title {
      font-size: 2rem;
    }
    
    .el-button {
      position: static;
      transform: none;
      margin-top: var(--spacing-md);
    }
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .exams-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .news-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@include respond-below(md) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .hero-item {
    .hero-title {
      font-size: 2rem;
    }
    
    .hero-subtitle {
      font-size: var(--font-size-medium);
    }
  }
  
  .section-header {
    .section-title {
      font-size: 1.75rem;
    }
  }
  
  .quick-nav-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-nav-item {
    .nav-icon {
      width: 56px;
      height: 56px;
    }
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .courses-grid,
  .exams-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@include respond-below(sm) {
  .hero-item {
    .hero-title {
      font-size: 1.5rem;
    }
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

// 暗色主题适配
@include dark-theme {
  .quick-nav-section,
  .popular-exams-section,
  .partners-section {
    background: var(--bg-color-dark);
  }
  
  .quick-nav-item,
  .exam-card,
  .news-card {
    background: var(--bg-color-dark);
    border-color: var(--border-color-dark);
  }
  
  .partner-item {
    border-color: var(--border-color-dark);
  }
}
</style>